﻿@model NB.MGJ.Model.CodeManage_GenCode
@using NB.MGJ.Model;
@using NB.MGJ.Common.Helper;
@{
    Layout = null;
}

<script src="~/Scripts/MGJJS/CodeManage/RawCode.js"></script>
<script src="~/Scripts/MGJJS/CodeManage/RowCodeListbox.js"></script>

<script src="~/Scripts/MGJJS/CodeManage/AllotCode.js"></script>
<style>
    .btn-success input[type="file"] {
        opacity: 0;
    }

    /*input[name='CodeTypes'], input[name='Status'] {
        margin-left: 30px;
    }*/
</style>

<form id="form_BornCode" role="form" class="form-horizontal" onkeydown="if(event.keyCode==13){return false;}">

    <div class="form-group">
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span>公司名称：
        </div>
        <div class="col-xs-4 col-md-4">
            <input type="hidden" id="Eid" name="EnterpriseId" />
         
            <select id="EnterpriseId" class="form-control selectpicker" data-live-search="true" data-live-search-placeholder="Search" data-actions-box="true" title="--请选择--" onchange="ChangeValue(this)">
            </select>
        </div>
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span>生码批次：
        </div>
        <div class="col-xs-4 col-md-4">
            <input class="form-control" type="text" id="Batch" name="Batch" readonly />
        </div>
    </div>
    @*<div class="row">
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span>生码类型：
        </div>
        <div class="col-xs-10 col-md-10">
            <input type="checkbox" name="CodeTypes" value="1" />
            <label for="">防伪码</label>
            <input type="checkbox" name="CodeTypes" value="2" />
            <label for="">管理码</label>
            <input type="checkbox" name="CodeTypes" value="3" />
            <label for="">积分码</label>
            <input type="hidden" name="CodeType" id="CodeType" />
        </div>
        </div>*@


    <div class="form-group">
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span>服务码位数：
        </div>
        <div class="col-xs-4 col-md-4">
            <select class="form-control" name="Anti_Fake_Num">
                @*<option value="18">18</option>*@
                <option value="19">19</option>
                <option value="20" selected="selected">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
            </select>

        </div>
        <div class="col-xs-2 col-md-2  text-right">
            <span class="red-700">*</span>管理码位数：
        </div>
        <div class="col-xs-4 col-md-4">

            <select class="form-control" name="Logistics_Num">
                <option value="16" selected="selected">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <div class="col-xs-2 col-md-2 text-right">
            <div>
                <span class="red-700">*</span>生码类型：
            </div>

        </div>
        <div class="col-xs-4 col-md-4 text-left">
            <label for="CodeTypes">
                <input id="CodeTypes" type="checkbox" name="CodeTypes" class="CodeTypes" value="1" />&nbsp;服务码
            </label>
            <label for="CodeTypes_2">
                <input id="CodeTypes_2" type="checkbox" name="CodeTypes" class="CodeTypes" value="2" style="margin-left:20px;" />&nbsp;管理码
            </label>
            <label for="codetypes_3">
                <input id="codetypes_3" type="checkbox" name="CodeTypes" value="3" style="margin-left:20px;" />&nbsp;序列码
            </label>
            <input class="form-control addselect" type="text" name="num" placeholder="请输入序列号码" style="margin-top: 15px;display:none;" />
            <input type="hidden" name="CodeType" id="CodeType" />

        </div>
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span>生码数量：
        </div>
        <div class="col-xs-4 col-md-4">
            @Html.TextBoxFor(p => p.Gen_Code_Nums, new { @class = "form-control", maxlength = 10, placeholder = "请输入10000000以下生码数量" })
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-2 col-md-2  text-right">
            产品名称：
        </div>
        <div class="col-xs-4 col-md-4">
            <select class="form-control EmptyValidationText" id="ProductId" name="ProductId"></select>
        </div>
        <div class="col-xs-2 col-md-2 text-right">
            产品类型：
        </div>
        <div class="col-xs-4 col-md-4">
            <select class="form-control EmptyValidationText" id="TypeId" name="TypeId"></select>

        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-2 col-md-2 text-right">
            激活方式：
        </div>
        <div class="col-xs-4 col-md-4">
            <label for="Status">
                @Html.RadioButtonFor(m => m.Status, 1, new { id = "Status", @checked = "checked" })立即生效&nbsp;&nbsp;&nbsp;
            </label>
            <label for="Status_2">
                @Html.RadioButtonFor(m => m.Status, 2, new { id = "Status_2" })出库后生效
            </label>
        </div>
        <div class="col-xs-2 col-md-2  text-right">
            产品批次：
        </div>
        <div class="col-xs-4 col-md-4">
            <select class="form-control EmptyValidationText" id="ProductBatchId" name="ProductBatchId"></select>
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span>网站查询：
        </div>
        <div class="col-xs-4 col-md-4">
            @Html.TextBoxFor(p => p.Query_Result_Content, new { @class = "form-control value" })
        </div>

        <div class="col-xs-2 col-md-2  text-right">
            <span class="red-700">*</span> 短信查询：
        </div>
        <div class="col-xs-4 col-md-4">
            @Html.TextBoxFor(p => p.Query_Message_Content, new { @class = "form-control value" })
        </div>


    </div>
    <div class="form-group">

        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span> 电话查询：
        </div>
        <div class="col-xs-4 col-md-4">
            @Html.TextBoxFor(p => p.Query_Tel_Content, new { @class = "form-control value" })
        </div>
        <div class="col-xs-2 col-md-2 text-right">
            <span class="red-700">*</span> 语音音色：
        </div>
        <div class="col-xs-4 col-md-4">
            <select class="form-control" id="voice" name="voice" onchange="selectvoice()">
                <option value="vixq" selected="selected">小琪（普通话）</option>
                <option value="vixy">小研（普通话） </option>
                <option value="vixf">小峰（普通话） </option>
                <option value="vixm">小梅（粤语） </option>
                <option value="vixl">小莉（台普）</option>
                <option value="vixr">小蓉（四川话）</option>
                <option value="vixyun">小芸（东北话）</option>
                <option value="vixk">小坤（河南话）</option>
                <option value="vixqa">小强（湖南话）</option>
                <option value="vixying">小莹（陕西话）</option>
                <option value="vinn">楠楠（普通话）</option>
                <option value="vixx">小新（普通话）</option>
                <option value="vils">老孙（普通话）</option>
                <option value="jiajia">嘉嘉（普通话）</option>
            </select>
        </div>

    </div>

    <div class="form-group">
        <div class="col-xs-2 col-md-2 text-right">
            数据期限：
        </div>
        <div class="col-xs-4 col-md-4">
            <label for="rqrsj1">
                @Html.RadioButtonFor(m => m.ExpiryDate, 1, new { id = "rqrsj1" }) &nbsp;无限期&nbsp;
            </label>
            <label for="rqrsj2">
                &nbsp;@Html.RadioButtonFor(m => m.ExpiryDate, 2, new { id = "rqrsj2", @checked = "checked" }) &nbsp;3年&nbsp;
            </label>
            <label for="rqrsj3">
                &nbsp;@Html.RadioButtonFor(m => m.ExpiryDate, 3, new { id = "rqrsj3" }) &nbsp;2年&nbsp;
            </label>
            <label for="rqrsj4">
                &nbsp;@Html.RadioButtonFor(m => m.ExpiryDate, 4, new { id = "rqrsj4" }) &nbsp;1年
            </label>
        </div>
        <div class="col-xs-2 col-md-2 text-right">
            企业名称：
        </div>
        <div class="col-xs-4 col-md-4">
            <input class="form-control" type="text" name="EnterpriseUse" id="EnterpriseUse" onchange="check(this)" />
        </div>
       
    </div>
    <div class="form-group">
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 text-right">
            标签图片：
        </div>
        <div id="thelist" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <label id="picker" style="background: url('/Content/webImgs/upLogo/cp_img_tj.png' );background-size:100% 100%;width:60px;height:60px;border-radius:4px;">
            </label>
            <input type="hidden" name="LabelImage" id="LabelImage" value="" />
        </div>
    </div>
        
</form>
<script>
    function check(_this) {
        var ename = $("#EnterpriseUse").val();
        $(".value").val('您好！您所查询的是' + ename + '生产的品牌产品，是正牌产品的标识，欢迎您再次选购！');
        $(".value").attr("title", '您好！您所查询的是' + ename + '生产的品牌产品，是正牌产品的标识，欢迎您再次选购！');
    }
    //序列码显示/隐藏
    $("#CodeTypes_3").click(function(){
        $(".addSelect").toggle()
    })

    function selectvoice(_this) {
        var volname = document.getElementById("voice").value;
        //console.log(volname);
    }

    function ChangeValue(_this)  {
        $("#Eid").val($(_this).children("option:selected").attr("id"));
        var ChangeValue = $(_this).children("option:selected").html();
        $(".value").val('您好！您所查询的是' + ChangeValue + '生产的品牌产品，是正牌产品的标识，欢迎您再次选购！');
        $(".value").attr("title", '您好！您所查询的是' + ChangeValue + '生产的品牌产品，是正牌产品的标识，欢迎您再次选购！');
    }

    function LoadingDefault() {
        var _allotid = sessionStorage.getItem('allotid');
        var _eid = sessionStorage.getItem('EID');
        var _count = sessionStorage.getItem('Count');
        var _codetype = sessionStorage.getItem('CodeTypes');
        sessionStorage.clear();
        if (_allotid && _eid && _count) {
            $("#Eid").val(_eid);
            $("#Gen_Code_Nums").attr("value", _count);
            $('#EnterpriseId option').each(function (i, ele) {
                var val = $(ele).attr('id');
                if (_eid == val) {

                    $(ele).attr('selected', 'selected');
                    $('#EnterpriseId').selectpicker('val', ($(ele).text()));
                    $("#EnterpriseId").attr("disabled", "disabled");
                    ChangeValue($(ele));
                    function ChangeValue(ele) {
                        var ChangeValue = $(ele).text();
                        $(".value").val('您好！您所查询的是' + ChangeValue + '生产的品牌产品，是正牌产品的标识，欢迎您再次选购！');
                        $(".value").attr("title", '您好！您所查询的是' + ChangeValue + '生产的品牌产品，是正牌产品的标识，欢迎您再次选购！');
                    }
                    $.MGJ.RawCode.Ajax_GetBatch(_eid);
                }
            })
        }
        if (_codetype != null) {
            var arr = _codetype.split(',');
            if (arr.length == 1) {
                if (arr[0] == 1)
                { $('.CodeTypes[value=1]').attr('checked', true) }
                else if (arr[0] == 2) {
                    $('.CodeTypes[value=2]').attr('checked', true)
                }
            }
            else {
                $('.CodeTypes').attr('checked', true)
            }
        }
    }


    function CompanyName() {
        $.ajax({
            type: "Get",
            url: "/CodeManage/SelEnterpriseBox",
            dataType: "json",
            success: function (data) {
                //console.log(data[0].ID)
                for (var i = 0; i < data.length ; i++) {
                    $("#EnterpriseId").append(" <option id='" + data[i].ID + "'>" + data[i].EnterpriseName + "</option>")
                }
                $('.selectpicker').selectpicker({
                    liveSearch: true,
                })
                LoadingDefault();
            }
        })
    }

    $(function () {
        CompanyName();
        $('#form_BornCode').bootstrapValidator({
            group: '.col-xs-4.col-md-4',
            fields: {
                'CodeTypes': {
                    validators: {
                        notEmpty: {
                            message: '生码类型未选择'
                        },
                    }
                },
                Batch: {
                    validators: {
                        notEmpty: {
                            message: '生码批次不能为空'
                        },
                    }
                },
                EnterpriseId: {
                    validators: {
                        notEmpty: {
                            message: '公司名称不能为空'
                        },
                    }
                },
                Gen_Code_Nums: {
                    validators: {
                        notEmpty: {
                            message: '生码数量不能为空'
                        },
                        regexp: {
                            regexp: /^[0-9]*[1-9][0-9]*$/,
                            message: '生码数量为正整数'
                        }
                    }
                },
                Query_Result_Content: {
                    validators: {
                        notEmpty: {
                            message: '网站查询不能为空'
                        }
                    }
                },
                Query_Message_Content: {
                    validators: {
                        notEmpty: {
                            message: '短信查询不能为空'
                        },
                    }
                },
                Query_Tel_Content: {
                    validators: {
                        notEmpty: {
                            message: '电话号码不能为空'
                        }
                    }
                },
                voice: {
                    validators: {
                        notEmpty: {
                            message: '语音音色不能为空'
                        },
                    }
                },
                Num: {
                    validators: {
                        notEmpty: {
                            message: '序列号码不能为空'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9]{1,6}$/,
                            message: '请输入1-6位的英文或数字'
                        }
                    }
                }
            }
        });
    })

    //图片上传
    $(function () {
        var isUpload = 0;
        if ($("#LabelImage").val() != '') {
            $('#picker').hide();
            $('#thelist').prepend("<div class='img-thumbnail'><img src='" + $("#LabelImage").val() + "' style='width:60px;height:60px' /></div>");
            $('#thelist > .img-thumbnail').eq(0).mouseenter(function () {
                var url = $(this).find('img').attr('src');
                $(this).attr('name', url).find('img').css({ 'width': '60px', 'height': '60px' }).attr('src', '/Content/webImgs/upLogo/cp_img_sc.png');
            }).mouseleave(function () {
                var url = $(this).attr('name');
                $(this).find('img').attr('src', url);
            }).click(function () {
                $(this).remove();
                $('#picker').css('display', 'inline-block');
                isUpload = 0;
            });
        }
        else {
            $('#picker').mouseenter(function () {
                $(this).css({ 'background': 'url("/Content/webImgs/upLogo/cp_img_tj_a.png")', 'backgroundSize': '100% 100%' });
            }).mouseleave(function () {
                $(this).css({ 'background': 'url("/Content/webImgs/upLogo/cp_img_tj.png")', 'backgroundSize': '100% 100%' });
            });
        }

        var uploader2 = WebUploader.create({
            server: '/Upload/Upload/',
            pick: {
                id: '#picker',
                multiple: false
            },
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/jpg,image/jpeg,image/png'
            },
            resize: false
        });
        upImg(uploader2, '#picker');
        function upImg(item, selector) {
            // 当有文件添加进来的时候
            item.on('fileQueued', function (file) {
                isUpload = 1;
                var $li = $(
                                '<div  id="' + file.id + '" class="img-thumbnail">' +
                                '<img alt="null"/>' +
                                '</div>'
                        ),
                        $img = $li.find('img');
                // $list为容器jQuery实例
                $(selector).parent().prepend($li);
                item.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
         
                 
                }, 60, 60);
                $('#thelist > .img-thumbnail').eq(0).mouseenter(function () {
                    var url = $(this).find('img').attr('src');
                    $(this).attr('name', url).find('img').css({ 'width': '60px', 'height': '60px' }).attr('src', '/Content/webImgs/upLogo/cp_img_sc.png');
                }).mouseleave(function () {
                    var url = $(this).attr('name');
                    $(this).find('img').attr('src', url);
                }).click(function () {
                    $(this).remove();
                    $('#picker').css('display', 'inline-block');
                });

                $('#picker').css('display', 'none');


                item.upload();
            });
            // 文件上传过程中创建进度条实时显示。
            item.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                        $percent = $li.find('.progress span');

                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<p class="progress"><span></span></p>')
                            .appendTo($li)
                            .find('span');
                }

                $percent.css('width', percentage * 100 + '%');
            });

            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            item.on('uploadSuccess', function (file, result) {
                $('#LabelImage').val(result._raw.substring(5));
            });

            // 文件上传失败，显示上传出错。
            item.on('uploadError', function (file,r) {
                var $li = $('#' + file.id),
                        $error = $li.find('div.error');
                // 避免重复创建
                if (!$error.length) {
                    $error = $('<div class="error" style="position: absolute;font-size: 14px;top:10px;left: 74px;color:red"></div>').appendTo($li);
                }
          
                $error.text("上传失败");
              
            });

            // 完成上传完了，成功或者失败，先删除进度条。
            item.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').remove();
            });
         
        }

       
    })
   
</script>